<template>
	<view style="height: 100vh;background: #F3F3F3;">
		<view style="padding-top: 88upx;height: 100%;box-sizing: border-box;">
			<view class="headWrap">
				<view class="head">
					<image src="../../static/mine/search_ico.png"></image>
					<input type="text" placeholder="请输入商圈" v-model="keyword" @input="changeKeyword" />
					<view @click="searchKeyword">搜索</view>
				</view>
				<view class="searchWrap" v-if="searchList.length>0">
					<view class="searchItem" v-for="(item,index) in searchList" :key="index" :data-index="index" @click="choiceDistrict" data-type="search">{{item.name}}</view>
				</view>
				
			</view>
			<view class="mark" v-if="searchList.length>0" @click="hideSearch"></view>
			<view class="conWrap">
				<view class="conWrapL">
					<view :class="['conWrapLItem',areaIndex==index?'active':'']" v-for="(item,index) in areaList" :key="index" :data-index="index" @click="choiceArea">{{item.name}}</view>
				</view>
				<view class="conWrapR">
					<view class="conWrapRItem" v-if="districtList.length==0">暂无商圈，请选择附近位置</view>
					<view class="conWrapRItem" v-for="(item,index) in districtList" :key="index" :data-index="index" @click="choiceDistrict" data-type="common">{{item.name}}</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				areaList:[],
				id:"",
				districtList:[],
				areaIndex:0,
				keyword:"",
				searchList:[],
				type:"common",
				proId:"",
				form:""
			}
		},
		onLoad(options) {
			this.id = options.id;
			if(options.type){
				this.type = options.type;
			}
			if(options.proid){
				this.proId = options.proid;
			}
			if(options.form){
				this.form = options.form;
			}
			this.getAddress();
		},
		methods: {
			choiceDistrict(e){
				console.log(e)
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				let pages = getCurrentPages();
				pages = pages[pages.length-2];
				if(this.form){
					uni.chooseLocation({
						success:reo=>{
							console.log(reo)
							if(this.type=='edit'){
								let obj = {};
								obj.id = this.proId;
								//obj.data = {};
								if(type=='search'){
									obj.business_areas_id = this.searchList[index].id;
								}else{
									obj.business_areas_id = this.districtList[index].id;
								}
								obj.detailed_address = reo.address;
								obj.user_id = uni.getStorageSync("userId");
								obj.longitude = uni.getStorageSync("longitude");//117.082094;
								obj.dimension = uni.getStorageSync("latitude");//39.987725;
								console.log(obj)
								this.$u.api.userBusinessAreasEdit(obj).then(res=>{
									this.$refs.uToast.show({
										title:"修改成功",
										type:"success",
										duration:2000
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1500)
								})
							}else{
								console.log("```````````````````````````````````")
								let obj = {};
								//obj.data = {};
								if(type=='search'){
									obj.business_areas_id = this.searchList[index].id;
								}else{
									obj.business_areas_id = this.districtList[index].id;
								}
								obj.detailed_address = reo.address;
								obj.user_id = uni.getStorageSync("userId");
								obj.dimension = reo.latitude;
								obj.longitude = reo.longitude;
								this.$u.api.userBusinessAreasAdd(obj).then(res=>{
									this.$refs.uToast.show({
										title:"添加成功",
										type:"success",
										duration:2000
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1500)
								})
							}
						}
					})
				}else{
					if(this.type=="edit"){
						let obj = {};
						obj.id = this.proId;
						if(type=='search'){
							obj.business_areas_id = this.searchList[index].id;
						}else{
							obj.business_areas_id = this.districtList[index].id;
						}
						obj.user_id = uni.getStorageSync("userId");
						this.$u.api.shopEdit(obj).then(res => {
							//console.log(res)
							this.$refs.uToast.show({
								title: "修改成功",
								type: "success",
								duration: 2000
							})
							pages.$vm.getDetail();
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						})
					}else{
						console.log(pages)
						if(type=='search'){
							pages.$vm.district = this.searchList[index];
							pages.$vm.area = this.areaList[this.areaIndex];
						}else{
							pages.$vm.district = this.districtList[index];
							pages.$vm.area = this.areaList[this.areaIndex];
						}
						uni.navigateBack({
							delta:1
						})
					}
				}
			},
			hideSearch(){
				this.searchList = [];
			},
			changeKeyword(e){
				if(!e.detail.value){
					this.searchList = [];
				}
			},
			searchKeyword(id){
				let obj = {};
				obj.area_id = this.id;
				// obj.area_id = this.id;
				// obj.area_id = 110100;
				obj.search = this.keyword;
				this.$u.api.businessAreasList(obj).then(res=>{
					this.searchList = res.list;
				})
			},
			choiceArea(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				this.areaIndex = index;
				this.getDistrict(this.areaList[index].id);
			},
			getAddress(){
				let obj = {};
				obj.area_parent_id = this.id;
				// console.log(obj);return;
				// obj.area_parent_id = 0;
				this.$u.api.areaList(obj).then(res=>{
					//console.log(res)
					// this.areaList = res.data.list;
					this.areaList = res.data;
					this.getDistrict(this.areaList[0].id);
				})
			},
			getDistrict(id){
				let obj = {};
				obj.did = id;
				// obj.area_id = id;
				obj.search = this.keyword;
				this.$u.api.businessAreasList(obj).then(res=>{
					//console.log(res)
					this.districtList = res.list;
				})
			}
		}
	}
</script>

<style scoped>
	.mark{
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		background: rgba(0,0,0,.5);
		z-index: 99;
	}
	.searchWrap{
		width: 100%;
		position: absolute;
		top: 88upx;
		left: 0;
		max-height: 600upx;
		background: white;
		overflow: auto;
		z-index: 100;
	}
	.searchItem{
		width: 100%;
		height: 82upx;
		line-height: 80upx;
		box-sizing: border-box;
		padding: 0 24upx;
		font-size: 28upx;
		color: #333333;
		border-bottom: 2upx solid #F3F3F3;
	}
	.searchItem:last-child{
		border-bottom: none;
	}
	
	
	.conWrapR{
		width: calc(100% - 244upx);
		height: 100%;
		box-sizing: border-box;
		overflow: auto;
		padding: 12upx 0;
		background: #FAFAFA;
	}
	.conWrapRItem{
		width: 100%;
		height: 88upx;
		box-sizing: border-box;
		padding: 0 80upx;
		line-height: 88upx;
		font-size: 24upx;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	
	.conWrap{
		width: 100%;
		height: calc(100% - 32upx);
		margin-top: 2upx;
		display: flex;
	}
	.conWrapL{
		width: 244upx;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
		padding: 12upx 0;
		background: white;
	}
	.conWrapLItem{
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		box-sizing: border-box;
		padding: 0 24upx;
		font-size: 24upx;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.conWrapLItem.active{
		color: #FFAC3F;
	}
	
	
	
	.headWrap{
		height: 88upx;
		background: white;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 14upx 24upx;
		width: 100%;
		z-index: 100;
	}
	.head{
		width: 100%;
		height: 60upx;
		display: flex;
		align-items: center;
		border-radius: 30upx;
		background: #F5F5F5;
		box-sizing: border-box;
		padding: 0 32upx;
		justify-content: space-between;
	}
	.head>image{
		width: 32upx;
		height: 32upx;
		/* margin-right: 10upx; */
	}
	.head>input{
		width: calc(100% - 100upx);
		height: 60upx;
		box-sizing: border-box;
		background: #F5F5F5;
		font-size: 20upx;
	}
	.head>view{
		font-size: 28upx;
		line-height: 60upx;
	}
</style>
